<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="container"></ul>

  <script>
    let now = Date.now();

    const total = 10000
    let ul = document.getElementById('container')
    let once = 20
    let page = total / once

    function loop(curTotal) {
      if (curTotal <= 0) return

      let pageCount = Math.min(curTotal, once)

      window.requestAnimationFrame(() => {

        let fragment = document.createDocumentFragment()  // 创建一个虚拟的文档片段

        for (let i = 0; i < pageCount; i++) {
          let li = document.createElement('li')
          li.innerText = ~~(Math.random() * total)
          fragment.appendChild(li)
        }
        
        ul.appendChild(fragment)

        loop(curTotal - pageCount)
      })

      // setTimeout(() => {
      //   for (let i = 0; i < pageCount; i++) {
      //     let li = document.createElement('li')
      //     li.innerText = ~~(Math.random() * total)
      //     ul.appendChild(li)
      //   }
      //   loop(curTotal - pageCount)
      // }, 0)
    }
    loop(total)



    // for (let i = 0; i < total; i++) {
    //   let li = document.createElement('li')
    //   li.innerText = ~~(Math.random() * total)
    //   ul.appendChild(li)
    // }



    // console.log(Date.now() - now);

    // setTimeout(() => {
    //   console.log(Date.now() - now);
    // })
  </script>

</body>
</html>